
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>出差报销单</title>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/my/apply.css"/>
    <script src="../../../script/widget/include.js"></script>
    <link rel="stylesheet" href="../../../css/wangImgEnlarge.css"/>
    <style>
        .apply{padding: 8px 20px 5px 20px;}
        .apply p{margin: 0.3rem 0;font-size: 0.6rem;}
        .apply .content{float: right;}
        body .sign-class .layui-layer-content{height: 208px!important;}
        body .sign-class .layui-layer-btn{padding-top: 0;padding-bottom: 0;}
        body .sign-class .layui-layer-btn .layui-layer-btn0{border: 1px solid #808080!important;background-color: white!important;color: #333;}
        body .sign-class .layui-layer-btn .layui-layer-btn1{background-color: #1E9FFF;color: white;}
    </style>
</head>
<body style="cursor: pointer">
<ul class="aui-list aui-form-list">
    <!-- 审批轨迹start -->
    <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
        <div><span style="letter-spacing: 5px;">(一)</span>审批轨迹</div>
    </li>
    <li class="aui-list-item">
        <div class="apply_style apply" id="approve_info">
            <p><label><span id="book_user_name">---</span><span>&emsp;发起审批&emsp;&emsp;</span></label><label class="content" id="create_time">---</label></p>
            <!--<p><label>审批人</label><label class="content">--</label></p>-->
        </div>
    </li>
    <!--申请单详情start-->
    <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
        <div><span style="letter-spacing: 5px;">(二)</span>出差报销单详情</div>
    </li>
    <li class="aui-list-item" id="order_list">
        <div class="aui-list-item-inner ">
            <div class="aui-list-item-title" style="color:#B6B6B6;">出差申请单</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon end-time"><span id="request_code" style="color:#B6B6B6;"></span></div>
            </div>
        </div>
    </li>


    <!--申请单详情end-->
    <!--出行时间start-->
    <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
        <div><span style="letter-spacing: 5px;">(三)</span>出行时间</div>
    </li>
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title" style="color:#B6B6B6;">出行开始时间</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon start-time"><span id="travel_start_time" style="color:#B6B6B6;"></span></div>
            </div>
        </div>
    </li>
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title " style="color:#B6B6B6;">出行结束时间</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon end-time"><span id="travel_end_time" style="color:#B6B6B6;"></span></div>
            </div>
        </div>
    </li>
    <!--出行时间end-->
    <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;" id="expense_detail">
        <div><span style="letter-spacing: 5px;">(四)</span>报销单信息录入</div>
    </li>


    <!-- 报销总金额 start -->
    <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
        <div><span style="letter-spacing: 5px;">(五)</span>报销总金额</div>
    </li>
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title" style="color:#B6B6B6;">订单总金额（元）</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon start-time"><span style="color:#B6B6B6;" id="order_money"></span></div>
            </div>
        </div>
    </li>
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title " style="color:#B6B6B6;">费用明细总和（元）</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;" id="detailed_sum"></span></div>
            </div>
        </div>
    </li>
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title " style="color:#B6B6B6;">报销总金额（元）</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;" id="total_money"></span></div>
            </div>
        </div>
    </li>
    <!-- 报销总金额 end -->
    <!-- approve sign start -->
    <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
        <div><span style="letter-spacing: 5px;">(六)</span>审批签字</div>
    </li>
    <li class="aui-list-item">
        <div class="apply_style apply" id="sign_info">
        </div>
    </li>
    <!-- approve sign end -->
</ul>
<!--approve option strat-->

<div class="aui-content-padded" style="text-align: center;">
    <p id="approve_option"></p>
</div>
<!--approve option end-->
<div style="padding:8%;display:none;" id="rejectCause">
    <div class="aui-list-item-inner">
        <div class="aui-list-item-input" style="">
            <label class="aui-show aui-margin-t-10"><input class="aui-radio" type="radio" name="demo1" checked value="价格太高"> 价格太高</label>
            <label class="aui-show aui-margin-t-10"><input class="aui-radio" type="radio" name="demo1" value="出差任务取消"> 出差任务取消</label>
            <label class="aui-show aui-margin-t-10"><input class="aui-radio" type="radio" name="demo1" value="出差计划可能变动"> 出差计划可能变动</label>
            <label class="aui-show aui-margin-t-10"><input class="aui-radio" type="radio" name="demo1" value="超出可审批权限范围"> 超出可审批权限范围</label>
        </div>
    </div>
</div>
<div class="htmleaf-container" id="signPass" style="display:none;">
    <div class="container">
        <div class="col-xs-12">
            <!--<h4>签名板</h4>-->
            <div class="js-signature" data-height="200" data-border="1px solid #e0e0e0" data-line-color="black" data-background="white" data-auto-fit="false"></div>
            <div id="signature" style="display: none">
                <p><em>保存后，签名结果将显示在下面</em></p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../../script/aui/api.js"></script>
<script type="text/javascript" src="../../../script/aui/aui-toast.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../script/extend/doT.min.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/config.js"></script>
<script type="text/javascript" src="../../../script/layer/layer.js"></script>
<script type="text/javascript" src="../../../script/extend/jq-signature.js"></script>
<script type="text/javascript" src="../../../script/extend/wangImgEnlarge.js"></script>
<!-- 订单模板 -->
<script id="order_tpl" type="text/x-dot-template">
    {{ for(var prop in it) { }}
        {{ if (it[prop]['product_id'] == 1 ) { }}
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color: #6b6767;font-weight: bold;">订单号</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color: #6b6767;font-weight: bold;">{{= it[prop]['user_orderid'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">订单总价</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">￥{{= it[prop]['order_total_price'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">订单类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">飞机票</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">航班号</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['flight_number'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">起飞日期</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['take_off_date'] }}{{= it[prop]['take_off_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">预定时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['create_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">支付类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['pay_name'] }}</span></div>
                </div>
            </div>
        </li>
        {{ }else if (it[prop]['product_id'] == 3 ) { }}
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color: #6b6767;font-weight: bold;">订单号</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color: #6b6767;font-weight: bold;">{{= it[prop]['user_orderid'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">订单总价</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">￥{{= it[prop]['order_total_price'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">订单类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">酒店</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">酒店名称</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['hotel_name'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">入住时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['arrival_time'] }}{{= it[prop]['departure_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">预定时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['create_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">支付类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['pay_name'] }}</span></div>
                </div>
            </div>
        </li>
        {{ }else if (it[prop]['product_id'] == 5 ) { }}
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color: #6b6767;font-weight: bold;">订单号</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color: #6b6767;font-weight: bold;">{{= it[prop]['user_orderid'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">订单总价</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">￥{{= it[prop]['order_total_price'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">订单类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">火车票</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">车次</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['train_code'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">发车时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['train_date'] }}{{= it[prop]['train_start_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">预定时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['create_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">支付类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['pay_name'] }}</span></div>
                </div>
            </div>
        </li>
        {{ } }}

    {{ } }}
</script>
<!-- 审核轨迹模板 -->
<script id="approve_tpl" type="text/x-dot-template">
    {{ if(it.approver_record != '' && it.approver_record !== null){ }}
    {{ for(var prop=0, leng = it.approver_record.length; prop<leng; prop++) { }}
        {{ if(it.approver_record[prop]['approved_status'] == 0){ }}
        <p><label>[{{=prop+1}}级审批]{{= it.approver_record[prop]['user_name'] }}<span style="color: green;">&emsp;审批通过</span></label><label class="content">{{= it.approver_record[prop]['approved_time'] }}</label></p>
        {{ } else { }}
        <p><label>[{{=prop+1}}级审批]{{= it.approver_record[prop]['user_name'] }}<span style="color: red;">&emsp;审批驳回</span></label><label class="content">{{= it.approver_record[prop]['approved_time'] }}</label></p>
        <p><label>驳回原因：{{= it.approver_record[prop]['dismissal_cause'] }}</label></p>
        {{ } }}
    {{ } }}
    {{ } }}
</script>

<!-- 报销明细模板 -->
<script id="detail_tpl" type="text/x-dot-template">
    {{ if(it.detail.length > 0){ }}
    {{ for(var prop=0, leng=it.detail.length; prop<leng; prop++) { }}
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">

            <div class="aui-list-item-title" style="color:#B6B6B6;">报销明细（{{= prop+1 }}）</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon start-time"><span style="color:#B6B6B6;"></span></div>
            </div>
        </div>
    </li>
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title " style="color:#B6B6B6;">报销金额（元）</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">￥{{= it.detail[prop]['money'] }}</span></div>
            </div>
        </div>
    </li>
    <div class="aui-card-list" style="margin-bottom: 0;">
        <div class="aui-card-list-header" style="color:#B6B6B6;border: none;">
            明细
        </div>
        <div class="aui-card-list-content-padded aui-border-b aui-border-t">
            <div class="aui-row aui-row-padded" style="color: gray;">
                {{= it.detail[prop]['particulars'] }}&nbsp;
            </div>
        </div>
    </div>
    <div class="aui-card-list" style="margin-bottom: 0;">
        <div class="aui-card-list-header" style="color:#B6B6B6;border: none;">
            图片
        </div>
        <div class="aui-card-list-content-padded aui-border-b aui-border-t">
            <div class="aui-row aui-row-padded">
                {{ for(var p in it.detail[prop]['imgArr']){ }}
                <div class="aui-col-xs-4">
                   <img src="{{= it.detail[prop]['imgArr'][p]['src'] }}" />
                </div>
                {{ } }}

            </div>
        </div>
    </div>
    {{ } }}
    {{ }else{ }}
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title" style="color:#B6B6B6;">暂无</div>
        </div>
    </li>
    {{ } }}
</script>
<!-- 审核签名 -->
<script id="approve_sign" type="text/x-dot-template">
    {{ if(it.approver_record != '' && it.approver_record != null){ }}
        {{ for(var prop=0, leng=it.approver_record.length; prop<leng; prop++) { }}
            {{ if(it.approver_record[prop]['approved_status'] == 0){ }}
                {{ if(it.approver_record[prop]['sign_url'] != '' && it.approver_record[prop]['sign_url'] != null){ }}
                <p><label>[{{=prop+1}}级审批] {{= it.approver_record[prop]['user_name'] }}</label></p>
                <div style="height: 3rem;width: 3rem;">
                    <img src="{{= it.approver_record[prop]['sign_url'] }}" style="max-width: 100%;max-height:100%;">
                </div>
                {{ } }}
            {{ }else{ }}
            <p><label>已驳回</label></p>
            {{ } }}
        {{ } }}
    {{ }else{ }}
    <p><label>暂无</label></p>
    {{ } }}
</script>
<!-- 审核操作模板 -->
<script id="approve_option_tpl" type="text/x-dot-template">
    {{ if(it['status'] == '未审批'){ }}
        {{ if(it['approve_info']['is_current'] == 1){ }}
        <div class="aui-btn aui-btn-inline aui-btn-info changeStatus" style="margin: 0 1rem;">
            <input type="hidden" value="0">
            通过申请
        </div>
        <div class="aui-btn aui-btn-info aui-btn-inline changeStatus">
            <input type="hidden" value="1">
            驳回申请
        </div>
        {{ } }}
    {{ } }}
</script>
<script type="text/javascript">
    var toast = new auiToast();
    apiready = function() {
        api.parseTapmode();
        $('.js-signature').on('jq.signature.changed', function() {
            sing_flag = true;
        });

        $('.sele_click').click(function () {
            var right = $('#sel_right').css('display');
            if(right === 'none'){
                $('#sel_right').css('display','block');
                $('#sel_dow').css('display','none');
            }else{
                $('#sel_right').css('display','none');
                $('#sel_dow').css('display','block');
            }
        })
        getApplyInfo();
    }
    //获取新增出差申请单数据
    function getApplyInfo(){
        var expense_id = $api.getStorage('expense_id');
        var param = {};
        param.url = Config.travel.expenseInfo;
        param.data = {id: expense_id};
        /*请求申请单列表接口*/
        ajax (param, function(ret) {
            // console.log(JSON.stringify(ret));
            if(ret.code === 1){
                //订单信息
                $("#book_user_name").text(ret.data.book_user.user_name);
                $("#request_code").text(ret.data.request_code);
                $("#create_time").text(ret.data.create_time);

                $("#travel_start_time").text(ret.data.travel_start_time);
                $("#travel_end_time").text(ret.data.travel_end_time);

                $("#order_money").text(ret.data.order_money);
                $("#detailed_sum").text(ret.data.detailed_sum);
                $("#total_money").text(ret.data.total_money);

                // console.log(JSON.stringify(ret.data));
                // console.log(JSON.stringify(ret.data.approver_record));
                //审批轨迹
                var interText = doT.template($("#approve_tpl").text());
                $("#approve_info").append(interText(ret.data));
                //报销明细
                var interText2 = doT.template($("#detail_tpl").text());
                $("#expense_detail").after(interText2(ret.data));

                //申请单关联订单
                if(ret.data.order_list.plane.total > 0 || ret.data.order_list.hotel.total > 0 || ret.data.order_list.train.total > 0) {
                    var interText = doT.template($("#order_tpl").text());

                    if (ret.data.order_list.train.total > 0) {
                        $("#order_list").after(interText(ret.data.order_list.train.data));
                        var price = 0;
                        // console.log(JSON.stringify(ret.data.order_list.train.data));
                        // console.log(Object.keys(ret.data.order_list.train.data));
                        for (var i=0;i < Object.keys(ret.data.order_list.train.data).length;i++){
                            price += parseFloat(ret.data.order_list.train.data[i].order_total_price);
                        }
                        $("#order_list").after('<div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10" style="border-bottom: 1px solid #dddddd;margin:0;background:white;"><div class="aui-info-item"><span class="aui-margin-l-5">火车票订单</span></div><div class="aui-info-item"><span class="aui-margin-r-10" style="color:orange;">合计：' + price + ' 元</span><span class="aui-margin-r-5" data-group="train" onclick="showorder(this)">展开</span></div></div>');
                    }

                    if (ret.data.order_list.hotel.total > 0) {
                        $("#order_list").after(interText(ret.data.order_list.hotel.data));
                        var price = 0;
                        for (var i=0;i<Object.keys(ret.data.order_list.hotel.data).length;i++){
                            price += parseFloat(ret.data.order_list.hotel.data[i].order_total_price);
                        }
                        $("#order_list").after('<div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10" style="border-bottom: 1px solid #dddddd;margin:0;background:white;"><div class="aui-info-item"><span class="aui-margin-l-5">酒店订单</span></div><div class="aui-info-item"><span class="aui-margin-r-10" style="color:orange;">合计：' + price + ' 元</span><span class="aui-margin-r-5" data-group="hotel" onclick="showorder(this)">展开</span></div></div>');
                    }

                    if (ret.data.order_list.plane.total > 0) {
                        $("#order_list").after(interText(ret.data.order_list.plane.data));
                        var price = 0;
                        for (var i = 0; i<Object.keys(ret.data.order_list.plane.data).length; i++) {
                            price += parseFloat(ret.data.order_list.plane.data[i].order_total_price);
                        }
                        $("#order_list").after('<div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10" style="border-bottom: 1px solid #dddddd;margin:0;background:white;"><div class="aui-info-item"><span class="aui-margin-l-5">机票订单</span></div><div class="aui-info-item"><span class="aui-margin-r-10" style="color:orange;">合计：' + price + ' 元</span><span class="aui-margin-r-5" data-group="plane" onclick="showorder(this)">展开</span></div></div>');
                    }
                }
                var interText = doT.template($("#approve_sign").text());
                $("#sign_info").append(interText(ret.data));

                var interText2 = doT.template($("#approve_option_tpl").text());
                $("#approve_option").append(interText2(ret.data));
                initApproveButton();

                initImg();

            } else {
                $("#tab").text('');
                $toast(ret.msg);
            }
        })
    }
    function showorder(event){
        $('.order_'+$(event).attr('data-group')).show();
        $(event).text('收回');
        $(event).attr('onclick', 'hideorder(this)');
    }
    function hideorder(event){
        $('.order_'+$(event).attr('data-group')).hide();
        $(event).text('展开');
        $(event).attr('onclick', 'showorder(this)');
    }
    function initImg(){
        $("img").on("click",function(){var url = $(this).attr("src");$("body").append('<div class="wang-enlarge-plugin-div">\n'+'    <div class="wang-enlarge-cover-div"></div>\n'+'    <div class="wang-enlarge-img-div"><img src="'+url+'"></div>\n'+"</div>")});$(document).on("click",".wang-enlarge-plugin-div",function(){this.remove()});
    }
    var flag = true;
    var reason = '';
    var sing_flag = false;
    var sign_url = '';
    var status = 0;
    function initApproveButton(){
        $(".changeStatus").click(function () {
            status = $(this).find("input").val();
            if (!flag) {
                return false;
            }
            flag = false;
            if(status == 1){
                layer.open({
                    type: 1,
                    title: '选择驳回原因',
                    area: ['300px', '260px'], //宽高
                    content: $("#rejectCause"),
                    btn : '确定',
                    closeBtn : 1,
                    shadeClose : true,
                    yes : function () {
                        reason = $("#rejectCause input:checked").val();
                        changeStatus();
                        layer.closeAll();
                    }
                });
                flag = true;
            }else{
              $('.js-signature').jqSignature();
              api.setScreenOrientation({
                  orientation: 'landscape_left'
              });
              $('html').addClass('noscroll');
              layer.open({
                  type: 1,
                  title: '签名审核',
                  area: [api.frameHeight + 'px', '300px'], //宽高
                  offset : ['10px','25px'],//坐标
                  content: $("#signPass"),
                  btn: ['清空', '确定'],
                  closeBtn: 1,
                  yes: function() {
                      clearCanvas();
                      return false;
                  },
                  btn2: function() {
                      if (!sing_flag) {
                          $toast("请签名");
                          return false;
                      }
                      saveSignature();
                      layer.closeAll();
                      return false;
                  },cancel: function(index, layero){
                      screenRotate();
                      flag = true;
                      layer.close(index);
                      return false;
                  }
              });
            }
        });
    }
    /* 审核/驳回 */
    function changeStatus(){
        var expense_id = $api.getStorage('expense_id');
        var param = {};
        param.url = Config.travel.expenseExamineApprove;
        if (status == 1) {
            param.data = {expense_id: expense_id, approved_status: status, dismissal_cause: reason};
        } else {
            param.data = {expense_id: expense_id, approved_status: status, sign_url:sign_url};
        }
        ajax(param,function(ret){
            // console.log(ret);
            if(ret.code === 1){
                $alert('成功', function() {
                    screenRotate();
                    setTimeout(function(){
                        location.reload();
                    },500);
                });
            } else {
                $toast('审批失败');
            }
        })
    }

    function clearCanvas() {
        $('.js-signature').jqSignature('clearCanvas');
        sing_flag = false;
    }

    function saveSignature() {
        $('#signature').empty();
        var canvas = document.getElementsByTagName('canvas');
        var dataUrl = canvasToImage(canvas[0], "white");
        var param = {};
        param.url = Config.travel.uploadImgOss;
        param.data = {imgData: dataUrl};
        ajax(param,function(ret){
            // console.log(JSON.stringify(ret));
            if(ret.code === 1){
                sign_url = ret.data;
                //审核通过操作
                changeStatus();
            }else{
                $toast(ret.msg);
            }
        })
    }
    function canvasToImage(canvas, backgroundColor){
        //cache height and width
        var w = canvas.width;
        var h = canvas.height;
        var data;

        var context = canvas.getContext('2d');
        if(backgroundColor)
        {
            //get the current ImageData for the canvas.
            data = context.getImageData(0, 0, w, h);

            //store the current globalCompositeOperation
            var compositeOperation = context.globalCompositeOperation;

            //set to draw behind current content
            context.globalCompositeOperation = "destination-over";

            //set background color
            context.fillStyle = backgroundColor;

            //draw background / rect on entire canvas
            context.fillRect(0,0,w,h);
        }

        //get the image data from the canvas
        var imageData = canvas.toDataURL("image/png");

        if(backgroundColor)
        {
            //clear the canvas
            context.clearRect (0,0,w,h);

            //restore it with original / cached ImageData
            context.putImageData(data, 0,0);

            //reset the globalCompositeOperation to what it was
            context.globalCompositeOperation = compositeOperation;
        }

        //return the Base64 encoded data url string
        return imageData;
    }
</script>
